<template>
    <div id="rightProvince" style="height: 100%;width: 100%" >
        <div class="bg-color-black" style="height: 100%;width: 100%" >

            <div class="d-flex jc-center" style="height: 100%;width: 50%;float: left;" >
                <dv-active-ring-chart :config="config" style="height: 100%;width: 100%" />
            </div>
            <div class="d-flex jc-center" style="height: 100%;width: 50% ;float: right;"  >
                <dv-water-level-pond :config="config1"  style="height: 100%;width: 100% ;" />
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "rightProvince",
        data() {
            return {
                config1: {
                    data: [66]
                },
                config:{
                    data: [
                        {
                            name: '周口',
                            value: 55
                        },
                        {
                            name: '南阳',
                            value: 120
                        },
                        {
                            name: '西峡',
                            value: 78
                        },
                        {
                            name: '驻马店',
                            value: 66
                        },
                        {
                            name: '新乡',
                            value: 80
                        }
                    ],
                    lineWidth: 10
                },

            }
        },
    }
</script>

<style lang="scss" scoped>
    #rightProvince {
        padding: 0.2rem;
        height: 5.125rem;
        min-width: 3.75rem;
        border-radius: 0.0625rem;

        .bg-color-black {
            height: 4.8125rem;
            border-radius: 0.125rem;
        }

        .text {
            color: #c3cbde;
        }
    }
</style>
